<template>
	<div :class="classnm">
		<input :type="type" :placeholder="placeholder" v-model="val" :name="name" autocomplete="off">
    <div v-if="istel==1" class="sendSms">
      <button type="button" v-on:click="sendMsg(isfind)" class="sendButton" >{{$t('m.regist.input.getMsg')}}</button>
    </div>
		<slot name="icon"></slot>
	</div>
</template>
<script>
	"use strict";
  import bus from '../../assets/js/eventBus.js';
  import jQuery from 'jquery';
  import {getSign} from '../../assets/js/api.js'
  import {site,apiKey} from '../../assets/js/site.js';
	export default{
		name:"inp",
    props:["classnm","placeholder","info","type","name","istel","isfind"],
		data(){
			return{
        wait:60,
        regxphone: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
        regxemail: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
			}
		},
		computed:{
			val:{
				get(){
					return this.info;
				},
				set(v){
					bus.$emit('infoChange',{name:this.name,value:v})
				}
			}
		},
    methods:{
      sendMsg(isfind){
        var th = this;
        let info = {}
        let sign = ''
        var tel = document.getElementsByName('email')[0].value;
        if (th.regxphone.test(tel)) {
          info = {
            api_key: apiKey,
            phone:tel,
            type:12
          }
           sign = getSign(info);
          info['sign'] = sign;
        }else if (th.regxemail.test(tel)) {
          info = {
            api_key: apiKey,
             email:tel,
             type:3
          }
           sign = getSign(info);
          info['sign'] = sign;
        }else {
          bus.$emit('msgChange',{value:th.$t('m.tips.regist["15"]')})
          return false
        }
          jQuery.ajax({
            type: "POST",
            url: "http://"+site+"/index/Api/sendMsg",
            data: info ,
            dataType:"json",
            complete:function(xhr,status){
              plus.nativeUI.closeWaiting();
            },
            success:function(data,status){
              if (status == "success") {
                switch (data.code) {
                  case 0:
                    bus.$emit('msgChange',{value:th.$t('m.tips.regist["13"]')})
                    th.msg = th.$t('m.tips.login["1"]');
                    th.time();
                    break;
                  case -1:
                    bus.$emit('msgChange',{value:th.$t('m.tips.regist["04"]')})
                    break;
                  case -2:
                    th.msg = th.$t('m.tips.login["02"]');
                    break;
                  case "03":
                    th.msg = th.$t('m.tips.login["03"]');
                    break;
                  case "04":
                    th.msg = th.$t('m.tips.login["04"]');
                    break;
                }
              } else {
                th.msg = th.$t('m.tips.timeout');
              }
              //
              // if(data.status == 1){
              //   bus.$emit('msgChange',{value:th.$t('m.tips.regist["13"]')})
              //   th.time();
              // }else if(data.status == 3){
              //   bus.$emit('msgChange',{value:th.$t('m.tips.regist["17"]')})
              // }else{
              //   bus.$emit('msgChange',{value:th.$t('m.tips.regist["14"]')})
              // }
            },
          });
      },
      time() {
        if (this.wait == 0) {
          document.getElementsByClassName('sendButton')[0].removeAttribute("disabled");
          document.getElementsByClassName('sendButton')[0].innerHTML=this.$t('m.regist.input.getMsg');
          this.wait = 60;
        } else {
          document.getElementsByClassName('sendButton')[0].setAttribute("disabled", true);
          document.getElementsByClassName('sendButton')[0].innerHTML=this.wait+"秒后重新发送";
          this.wait--;
          var th = this;
          setTimeout(function() {
              th.time();
            },
            1000)
        }
      },
    },
	}
</script>
<style lang="scss">
	@import '../../assets/sass/index.scss';
  .inputs_buy{
    width: 90%;
    font-size: 0.4rem;
    color: #ccc;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 2%;
  }
  .classnm{
    width: 90%;
    height: 1.2rem;
    /*padding: 10%;*/
    font-size: 0.4rem;
    margin: 3% 5%;
    color: #ccc;
    background-color:  rgba(0, 0, 0, 0.3);
    border-radius: 2%;
  }
	.common{
    position:relative;
		width:100%;
		height:1.1rem;
		margin-bottom:20px;
		input{
			color:#fff;
			height:100%;
			width:100%;
			background: $headcolor;
			border-radius: 2px;
			text-indent: 10px;
			font-size:16px;
		}
    input::-webkit-input-placeholder {
      font-size: 14px;
      color: #AAA;
    }
	}
  .sendSms{
    position: absolute;
    right:0.05rem;
    top:0.05rem;
    height: 1rem;
    line-height: 1rem;
    button{
      border: 1px solid $headcolor;
      padding:10px;
      border-radius: 5px;
      color: $headcolor;
      font-size: 14px;
      background: #fff;
    }
  }
	.pwd_cnd{
		margin-bottom:0;
	}
	.second{
		margin-top:0.3rem;
	}

	.mid{
		margin-bottom:0;
		input{
			width:81%;
		}
	}
</style>
